<template>
  <div class="back-all" v-if="state === 1">
    <div class="back-top">
      <div class="backtop-left" id="sft"><h4>数据后台管理</h4></div>
      <div class="backtop-right" id="sfr">
        <!-- 抽屉 -->
        <el-drawer
          title="修改密码"
          :visible.sync="drawer"
          :direction="direction"
          :before-close="handleCloses"
        >
          <el-input
            v-model="oldpassword"
            type="password"
            placeholder="原密码"
            style="margin-bottom: 20px"
          >
          </el-input>
          <el-input
            v-model="newpassword"
            type="password"
            placeholder="新密码"
          ></el-input>
          <el-button type="primary" class="surpsw" @click="updatepsw"
            >确定修改</el-button
          >
        </el-drawer>
        <!-- 抽屉 -->
        <el-popover placement="bottom" width="200" class="clh" trigger="click">
          <!-- 这里是点击激活内容 -->
          <div class="clh-top" style="width: 100%; height: 220px">
            <div
              class="clh-img"
              style="
                width: 100%;
                height: 180px;
                border-radius: 10px;
                background-color: rgb(63, 145, 240);
              "
            >
              <img
                class="timg"
                :src="url + user.adsphoto"
                v-if="user.adsphoto != null"
                alt="加载失败"
                style="
                  width: 80px;
                  height: 80px;
                  border-radius: 50%;
                  margin: 20px 0 0 60px;
                "
              />
              <img
                class="timg"
                src="@/assets/img/tx.png"
                v-else
                alt=""
                style="
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                  margin: 20px 0 0 180px;
                "
              />
              <div
                class="tcbtn"
                style="
                  width: 200px;
                  display: flex;
                  justify-content: space-between;
                  position: absolute;
                  top: 200px;
                "
              >
                <el-button size="small" @click="drawer = true"
                  >修改密码</el-button
                >
                <el-button size="small" @click="loginOut">退出</el-button>
              </div>
            </div>
          </div>
          <el-button slot="reference">
            <img
              class="fimg"
              :src="url + user.adsphoto"
              v-if="user.adsphoto != null"
              alt="加载失败"
            />
            <img class="fimg" src="@/assets/img/tx.png" v-else alt="" />
          </el-button>
        </el-popover>
      </div>
    </div>
    <div class="back-nav">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>首页</span>
          </template>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>系统管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1"
              ><a @click="toUserManager">用户管理</a></el-menu-item
            >
            <el-menu-item index="2-2"
              ><a @click="toTeacherManager">教师管理</a></el-menu-item
            >
            <el-menu-item index="2-3"
              ><a @click="toteacherrz">认证管理</a></el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>课程管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="3-1"
              ><a @click="toHighCourse">高中课程</a></el-menu-item
            >
            <el-menu-item index="3-2"
              ><a @click="toUnCourse">大学课程</a></el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>报表打印</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="3-1"
              ><a @click="toUserReport">用户报表</a></el-menu-item
            >
            <el-menu-item index="3-2">课程报表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
    <div class="bac-table">
      <component :is="bacName"></component>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Usermanager from '@/components/back/Usermanager.vue'
import Teachermanager from './Teachermanager.vue'
import HighCoursem from './HighCoursem.vue'
import UnCoursem from './UnCoursem.vue'
import UserReport from './UserReport.vue'
import Teacherrz from './Teacherrz.vue'
import bus from '../eventBus'

export default {
  components: {
    Usermanager,
    Teachermanager,
    HighCoursem,
    UnCoursem,
    UserReport,
    Teacherrz,
  },
  data() {
    return {
      state: 1,
      url: 'http://rnn0pzf74.hd-bkt.clouddn.com/',
      user: {},
      flag: false,
      bacName: '',
      drawer: false,
      direction: 'rtl',
      oldpassword: '',
      newpassword: '',
      fh: '',
    }
  },
  created() {
    const that = this
    that.start()
  },
  methods: {
    async start() {
      const that = this
      const { data: res } = await axios.get(
        'http://localhost:81/checkCode/queryStatus',{
          params: {
            token: localStorage.getItem('token'),
          },
        }
      )
      if (res.data == null) {
        console.log('未登录')
      } else {
        console.log('管理用户', res.data)
        that.user = res.data
      }
    },
    handleCloses(done) {
      const that = this
      that
        .$confirm('取消修改？')
        .then((_) => {
          done()
        })
        .catch((_) => {
          console.log('取消')
          that.newpassword = ''
          that.oldpassword = ''
        })
    },
    //点击确定修改密码
    updatepsw() {
      const that = this
      axios({
        method: 'GET',
        url:
          'http://localhost:81/user/updatepsw?oldpassword=' +
          that.oldpassword +
          '&newpassword=' +
          that.newpassword,
      }).then((res) => {
        console.log('确定修改密码后', res.data)
        if (res.data.code == 200) {
          that.$message({
            message: '修改成功',
            type: 'success',
          })
          that.drawer = false
          that.newpassword = ''
          that.oldpassword = ''
        } else {
          that.$message.error(res.data.msg)
        }
      })
    },
    //用户管理
    toUserManager() {
      const that = this
      that.bacName = 'Usermanager'
    },
    //教师管理
    toTeacherManager() {
      const that = this
      that.bacName = 'Teachermanager'
    },
    //认证管理
    toteacherrz() {
      const that = this
      that.bacName = 'Teacherrz'
    },
    //高中课程
    toHighCourse() {
      const that = this
      that.bacName = 'HighCoursem'
    },
    //大学课程
    toUnCourse() {
      const that = this
      that.bacName = 'UnCoursem'
    },
    //用户报表
    toUserReport() {
      const that = this
      that.bacName = 'UserReport'
    },
    async loginOut() {
      const that = this
      alert('退出')
      const { data: res } = await axios({
        method: 'GET',
        url:
          'http://localhost:81/user/loginOunt?username=' + this.user.username,
      })
      if (res.code == 200) {
        // bus.$emit('mlogout','suc')
        // this.state = 0
        // console.log('退出登录后')
        localStorage.removeItem('token')
        that.$router.replace('/')
      }
    },
  },
}
</script>

<style lang="less" scoped>
.back-all {
  width: 100%;
  position: relative;
  .back-top {
    height: 100%;
    .backtop-left {
      width: 200px;
      height: 100%;
      h4 {
        height: 70px;
        line-height: 70px;
        text-align: center;
        color: rgb(255, 255, 255);
        font-weight: bold;
        margin-top: 0;
        background-color: rgb(47, 138, 241);
      }
    }
    .backtop-right {
      position: absolute;
      top: 0;
      left: 200px;
      width: 1720px;
      height: 70px;
      background-color: rgb(63, 145, 240);
      .fimg {
        display: flex;
        z-index: 99;
        position: absolute;
        top: -15px;
        right: -8px;
        width: 50px;
        height: 50px;
        margin-top: 8px;
        border-radius: 50%;
      }
      .clh {
        display: flex;
        z-index: 1;
        position: absolute;
        right: 25px;
        top: 15px;
        .clh-top {
          .clh-img {
            background-color: rgb(63, 145, 240);
            width: 200px;
            height: 200px;
            .tcbtn {
              width: 300px;
              display: flex;
              justify-content: space-between;
              position: absolute;
            }
          }
        }
      }
    }
  }
  .back-nav {
    position: absolute;
    left: 0;
    top: 0;
    .radio {
      position: absolute;
      top: -50px;
    }
    .navmbx {
      width: 50px;
      height: 50px;
      position: absolute;
      left: 65px;
      top: 60px;
    }
    .el-menu-vertical-demo {
      position: absolute;
      top: 70px;
    }
  }
  .bac-table {
    width: 100%;
    height: 900px;
    margin-top: -15px;
  }
}
.el-drawer__body {
  position: relative;
}

.surpsw {
  position: absolute;
  bottom: 20px;
  left: 20px;
}
</style>
